<template>
    <h4>选择商品【{{ props.goodsName }}】的批号</h4>
    <!-- 分割线 -->
    <el-divider style="margin: 10px 0" />
    <el-form :model="form" inline>
        <el-form-item label="仓库：">
            <el-input v-model="form.warehouse" readonly placeholder="所有" @click="warehouseVisible = true"
                style="width: 180px" />
        </el-form-item>
        <el-form-item label="批次：">
            <el-input v-model="form.batchNo" placeholder="请输入批次" style="width: 250px;" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchBatchList">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="batchList" border height="300px" ref="batchRef" @selection-change="handleSelectionChange"
        v-loading="loading">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="code" label="批次号" width="150" />
        <el-table-column prop="totalNumber" label="数量" width="100" />
        <el-table-column prop="birthday" label="生产日期" width="100" />
        <el-table-column prop="expiration" label="保质期" width="80" />
        <el-table-column prop="warehouseName" label="仓库" width="100" />
        <el-table-column prop="warehouseLocationName" label="库位" width="100" />
    </el-table>

    <div style="margin-top: 10px; font-size: 14px; color: #606266;">
        已选中 {{ selectedCount }} 个商品
    </div>
    <!-- 分割线 -->
    <el-divider style="margin: 10px 0" />
    <!-- 分页 -->
    <div class="page-div" v-if="batchList">
        <el-pagination :current-page="1" :page-size="10" :total="batchList.length" @current-change="changePage"
            layout="total, ->, prev, pager, next, jumper" background />
    </div>
    <div style="margin-top: 10px; text-align: right">
        <el-button size="small" @click="emit('update:modelValue', false)">取消</el-button>
        <el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
    </div>


    <!-- 仓库搜索列表弹出对话框 -->
    <el-dialog v-model="warehouseVisible" title="仓库搜索列表" width="40%" style="height: auto;" draggable :show-close="true">
        <!-- 调用仓库的搜索组件 -->
        <WareHouse ref="warehouseRef"
            :info="{ selection: true, no: false, name: true, code: true, status: false, op: false, outButton: true }" />
        <br /><br />
    </el-dialog>

</template>

<script setup>
import { ref, watch, defineProps, onMounted, computed, defineEmits, inject } from 'vue'
import WareHouse from '@/views/basic/WareHouse.vue'
import { ElMessage } from 'element-plus';
let axios = inject("axios");
let form = ref({
    warehouse: '',
    batchNo: '',
})
let batchList = ref([

])

//仓库搜索选中结果
let warehouseVisible = ref(false)
let warehouseRef = ref();
watch(warehouseVisible, (newVisible) => {
    if (!newVisible) {
        if (warehouseRef.value && warehouseRef.value.selectedArray.length > 0) { //这里需要加上if判断，子组件中没有选择数据时为undefined，可能用于点击仓库，但是没选择，所以导致undefined报错
            form.value.warehouse = warehouseRef.value.selectedArray[0].name
            //获取到仓库编码，存数据库用，仓库name仅用作展示
            //用完之后清空，避免污染其他地方数据
            warehouseRef.value.clearSelected();
        }
    }
})
//选中的批次
let selectedBatch = ref([]);
//选中批次数量
const selectedCount = computed(() => selectedBatch.value.length)

// 选择变化
const handleSelectionChange = (val) => {
    selectedBatch.value = val
}

const handleConfirm = () => {
    emit('confirm', selectedBatch.value) // 把选中的商品传出去
    emit('update:modelValue', false) // 关闭 dialog
}

const props = defineProps([
    "goodsName", "goodsId"
])
const emit = defineEmits(['update:modelValue', 'confirm'])


// 根据查询条件查询 xxx商品 批次号列表
const searchBatchList = () => {
    init();
}

// 分页事件
const changePage = (now) => {
    console.log(now)
}
let loading = ref(false);
const init = async () => {
    if (loading.value) return;
    loading.value = true;
    try {
        const rs = await axios({
            url: '/xyy/inventory/batchList',
            method: 'post',
            data: {
                goodsId: props.goodsId
            }
        })
        if (rs.data.code == 5200) {
            ElMessage({ message: `获取${props.goodsName}的批次列表成功！`, type: 'success' });
            let arr = [], count = 0;
            rs.data.batchList.forEach(i => {
                let obj = {
                    code: i.batchNo,
                    totalNumber: i.totalNumber,
                    birthday: i.birthday,
                    expiration: i.expiration,
                    warehouseId: i.warehouseId,
                    warehouseName: i.warehouseName,
                    warehouseLocationId: i.warehouseLocationId,
                    warehouseLocationName: i.warehouseLocationName,

                }
                arr[count++] = obj;
            })
            console.log("arr:", arr)
            batchList.value = arr;
        }
    }finally {
        loading.value = false;
    }
    

}
onMounted(() => {
    init();
   
})
</script>

<style></style>